<template>
	<view id="topic">
		<view class="topic_out">
			<view class="topicInformation">
				<view class="tebie">
					<view class="information">
						<view class="information_img">
							<image :src="topic.topicIcon" class="image"></image>
						</view>
						<view class="information_content">
							<view class="information_head">
								{{topic.topicName}}
							</view>
							<view class="information_hot">
								热度·{{topic.inviNum}} &nbsp;讨论·{{topic.inviNum}}
							</view>
						</view>
					</view>
				</view>
				<view class="attention_2">
					<view class="attention_left">
						关注·8
					</view>
					<view class="attention_right">
						关注
					</view>
				</view>
				<view class="information_detail">
					简介：{{topic.topicDescr}}
				</view>
				<view class="information_detail_next">
					
				</view>
			</view>
			<view class="navBar">
				<NavBar :titles="titles" :height="80" @tabClick="tabClick"></NavBar>
			</view>
		</view>
		<Scroll :total="listNum" :currentPage="inviArr.page" @pullUpLoad="loadMore" @updateData="updateData">
			<InformationBar :arr="item" :opIndex="opIndex" v-for="(item,index) in inviArr.list" :key="index"></InformationBar>
		</Scroll>
	</view>
</template>

<script>
import NavBar from '../../components/common/NavBar.vue'
import InformationBar from '../../components/common/InformationBar.vue'
import Scroll from "../../components/common/Scroll.vue"
	export default {
		name: 'Topic',
		components: {
			NavBar,
			InformationBar,
			Scroll
		},
		onLoad(options) {
			this.topicId = options.topicId
			this.getToken()
			this.getOneTopic()
		},
		onShow() {
			
		},
		data() {
			return {
				topicId: 0,
				inviArr: {page: 0,list:[]},
				opIndex: 0,
				titles: ['最热发言','最近发布','最近回复'],
				topic: {}
			}
		},
		props: {},
		methods: {
			tabClick(index) {
				console.log("点击"+ index)
			},
			getOneTopic() {
				uni.getStorage({
					key: 'topic',
					success:(e)=>{
						// console.log(res.data.topic)
						this.topic = e.data.topic
					}
				})
			},
			getToken() {
				uni.getStorage({
					key: "login",
					success:(e) => {
						this.token = e.data.token
						// console.log(this.token)
						this.getInviData()
					}
				})
			},
			cancle() {
				uni.navigateBack({
					delta: 1
				})
			},
			async getInviData() {
				const page = this.inviArr.page + 1
				const res = await this.$myRequest({
					url: '/topic/selectInvisByTopic',
					token: this.token,
					data: {
						page: page,
						pageSize: 5,
						topicId: this.topicId
					}
				})
				console.log(res)
				if(res.data.data.list.length != 0) {
					this.inviArr.list.push(...res.data.data.list)
					this.inviArr.page += 1
					this.listNum = res.data.data.pages
					console.log(this.inviArr.list)
				}
			},
			loadMore() {
				// console.log('上拉在家更多')
				this.getInviData()
			},
			updateData() {
				this.inviArr.page = 0
				this.inviArr.list = []
				this.getInviData()
				// console.log(111)
			}
 		}
	}
</script>

<style>
	.topic_out{
		width: 93%;
		margin: 20rpx auto;
	}
	.topicInformation{
		background-color: #CFE4FF;
		margin: 20rpx auto 20rpx auto;
		border-radius: 27.27rpx;
	}
	.tebie{
		display: flex;
	}
	.topicInformation_return{
		width: 50.9rpx;
		height: 50.9rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
		text-align: center;
		font-size: 45rpx;
		line-height: 50.9rpx;
		margin: 15.81rpx 8rpx 10rpx 21.81rpx;
	}
	.information{
		margin-top: 21.81rpx;
		display: flex;
	}
	.information_img{
		width: 100rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		border-radius: 27.27rpx;
		margin: 0 15rpx 0 21.81rpx;
		text-align: center;
		line-height: 100rpx;
	}
	.information_img .image{
		width: 100%;
		height: 100%;
		border-radius: 27.27rpx;
	}
	.information_content{
		margin-top: 13rpx;
	}
	.information_head{
		font-size: 28rpx;
		margin-bottom: 13rpx;
	}
	.information_hot{
		font-size: 22rpx;
	}
	.attention_2{
		display: flex;
		margin:  15rpx 0 0 21.81rpx;
		height: 50rpx;
	}
	.attention_left{
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
			text-align: center;
	}
	.attention_right{
		position: absolute;
		font-size: 24rpx;
		right: 55rpx;
		background-color: #62A7FF;
		border-radius: 27.27rpx;
		width: 95rpx;
		height: 46rpx;
		line-height: 40rpx;
		text-align: center;
		color: #fff;
	}
	.information_detail{
		margin: 0 21.81rpx;
		font-size: 21.81rpx;
	}
	.navBar{
		background-color: #CFE4FF;
		border-radius: 27.27rpx;
	}
	.information_detail_next{
		height: 18rpx;
	}
</style>
